<template>
  <div class="job-search-container">
    <div class="search-bar">
      <el-input v-model="searchKeyword" placeholder="请输入职位关键词或城市" style="width: 65%; height: 50px;">
        <template #append>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </template>
      </el-input>
    </div>

    <div class="hot-cities">
      热门城市:
      <el-select v-model="selectedProvince" placeholder="请选择省份" style="margin-left: 20px;width: 90px">
      <el-option label="全国" value="全国"></el-option>
      <el-option v-for="province in provinces" :key="province" :label="province" :value="province">
      </el-option>
    </el-select>
      <span v-for="city in hotCities" :key="city" class="hot-city" @click="setSearchKeyword(city)">
        {{ city }}
      </span>

    </div>
    <div class="search-result">
      <p v-if="jobList.length === 0" class="no-jobs">没有找到相关职位</p>
    </div>
    <div class="job-list">
      <el-row :gutter="20">
        <el-col :span="8" v-for="job in jobList" :key="job.id">
          <el-card shadow="hover" class="job-card">
            <h3>{{ job.title }}</h3>
            <p><strong>薪资:</strong> {{ job.salary }}</p>
            <p><strong>地点:</strong> {{ job.location }}</p>
            <p><strong>描述:</strong> {{ job.description }}</p>
            <p><strong>要求:</strong> {{ job.requirements }}</p>
            <el-button link type="text" @click="router.push({ path: '/job-detail', query: { id: job.id } })">查看详情</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import  ElMessage from 'element-plus';
import axios from "axios";

const router = useRouter();

// 热门城市
const hotCities = ref(['北京', '上海', '广州', '深圳', '杭州']);
// 搜索关键词
const searchKeyword = ref('');
// 选择的省份
const selectedProvince = ref('全国');
// 省份列表
const provinces = ref([
  '北京市', '上海市', '广东省', '深圳市', '浙江省', '江苏省', '湖南省', '湖北省', '四川省', '河南省', '安徽省', '山东省', '河北省', '山西省', '陕西省', '甘肃省', '青海省', '台湾省', '贵州省', '云南省', '海南省', '江西省', '黑龙江省', '吉林省', '辽宁省', '内蒙古自治区', '广西壮族自治区', '西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区', '重庆市', '天津市', '香港特别行政区', '澳门特别行政区'
]);
// 职位列表
const jobList = ref([]);

// 获取职位列表数据
const fetchJobs =  () => {
  if (searchKeyword.value.trim() === '') {
    axios.get(BASEURL+'/jobSeeker/getAllJobs').then((response) => {
      console.log('职位列表:', response.data);
      if (response.data.code === 2000) {
        jobList.value = response.data.data;
      } else {
        console.log(response.data.message);
      }
    });
  }else {
    axios.get(BASEURL+'/jobSeeker/getJobs?KeyWord=' + searchKeyword.value).then(response => {
          console.log(response);
          if (response.data.code===2000){
            jobList.value = response.data.data;
          }else {
            console.log(response.data.message);
          }
        })
}
}
// 搜索按钮点击事件
const handleSearch = () => {
  fetchJobs();
};

// 页面加载时根据URL参数自动搜索
onMounted(() => {
    fetchJobs();

});
</script>

<style scoped>.job-search-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hot-cities {
  margin-bottom: 20px;
  margin-left: 300px;
  display: flex;
  justify-content: left;
}

.hot-city {
  margin-right: 10px;
  cursor: pointer;
  color: #409EFF;
}

.hot-city:hover {
  text-decoration: underline;
}

.job-list {
  margin-top: 20px;
}

.job-card {
  border-radius: 8px;
  transition: transform 0.2s;
}

.job-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.job-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.job-card p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}

.job-card p strong {
  color: #333;
}
.no-jobs {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 100px;
}
</style>